<template>
	<view>
		<view class="Lu-team-box" v-if="userInfo.identity_type == 1 || Teammembers.length == 0">
			<view class="Lu-team-header">
				<text class="iconfont icon-fanhui Lu-team-headericon" @click="navback()"></text>
				<text class="Lu-team-headertit">我的团队</text>
				<text class="Lu-team-quanyi fr" @click="navTo('/pages/personal/quanyi')">权益</text>
			</view>
			<view class="Lu-team-body" v-if="userInfo.identity_type == 1">
				<view class="Lu-team-img">
					<image src="/static/image/team/team.png" class="Lu-team-imgs"></image>
				</view>
				<view class="Lu-team-nohuoban">
					您还不是合伙人
				</view>
				<view class="Lu-team-go" @click="navTo('/pages/personal/join')">
					去加入
				</view>
			</view>
			<view class="Lu-team-body" v-else-if="Teammembers.length == 0">
				<view class="Lu-team-img">
					<image src="/static/image/team/team.png" class="Lu-team-imgs"></image>
				</view>
				<view class="Lu-team-nohuoban">
					您还没团队小伙伴哦
				</view>
				<view class="Lu-team-go" @click="navTo('/pages/personal/join')">
					去邀请
				</view>
			</view>
		</view>
		
		<view class="Lu-team-box Lu-team-box1" v-if="Teammembers.length != 0">
			<view class="Lu-team-header clearfix">
				<text class="iconfont icon-fanhui Lu-team-headericon fl" @click="navback()"></text>
				<text class="Lu-team-headertit fl">我的团队</text>
				<text class="Lu-team-quanyi fr" @click="navTo('/pages/personal/quanyi')">权益</text>
			</view>
			<view class="Lu-team-headername clearfix">
				<view class="Lu-team-headerimg fl">
					<image :src="userInfo.headImg"></image>
				</view>
				<view class="Lu-team-headertit fl">
					<view class="Lu-team-headertitname">{{userInfo.nickname_encode}}</view>
					<view class="Lu-team-headertittype">
						<text class="Lu-team-typetit">事业合伙人</text>
						<text class="iconfont icon-putong Lu-team-typetiticon" style="color: #666666;"></text>
					</view>
				</view>
			</view>
			<view class="Lu-team-TeamLists">
		
				<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
			</view>
			<swiper :current="currentTab" @change="swiperTab" :style="{'height':autoheight +'rpx'}">
				<swiper-item class="Lu-swiper-listbox"style="height: 100%;">
			
					<view class="Lu-swiper-list">
						<image src="../../static/image/team/myteam.png" class="Lu-swiper-listimg"></image>
						<view class="Lu-swiper-listinfobox" v-for="(items,index) in myteam" :key="index">
							<view class="Lu-swiper-listinfo clearfix">
								<view class="Lu-swiper-listinfoimg fl"><image :src="items.headImg"></image></view>
								<view class="Lu-swiper-listinfoname fl">
									<view class="Lu-swiper-listinfonames">{{items.nickname}}</view>
									<view class="Lu-swiper-listinfotype">身份:{{items.identity_type}}</view>
									<view class="Lu-swiper-listinfofs">加入方式:直接邀请</view>
								</view>
								<view class="Lu-swiper-listinfoicon fr iconfont icon-xiala" @click="showContent(index)" v-if="flag[index]"></view>
								<view class="Lu-swiper-listinfoicon fr iconfont icon-shouqi" @click="showContent(index)" v-else></view>
							</view>
							<view :class="{'active':flag[index]}">
								<view class="Lu-swiper-twolist" v-for="(item,index) in items.user_pids_list" :key='index'>
									<view class="Lu-swiper-twolistinfo clearfix">
										<view class="Lu-swiper-twolistinfoimg fl"><image :src="item.headImg"></image></view>
										<view class="Lu-swiper-twolistinfoname fl">
											<view class="Lu-swiper-twolistinfonames">{{item.nickname}}</view>
											<view class="Lu-swiper-twolistinfotype">身份:{{item.identity_type}}</view>
											<view class="Lu-swiper-twolistinfofs">加入方式:间接邀请</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					
						
					</view>
				</swiper-item>
				<swiper-item  class="Lu-swiper-listbox">
					<view class="Lu-swiper-list">
						<image src="../../static/image/team/myyaoqing.png" class="Lu-swiper-listimg"></image>
						<view class="Lu-swiper-listinfo clearfix">
							<view class="Lu-swiper-listinfoimg fl"><image :src='myyaoqing.image'></image></view>
							<view class="Lu-swiper-listinfoname fl">
								{{myyaoqing.name}}
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	const util = require('../../components/tablist/util.js');
	import refresh from '../../components/tablist/refresh.vue';
	import navTab from '../../components/tablist/navTab.vue';
	import tabBar4 from '../../components/tablist/tabBar4.vue';
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			refresh,
			navTab,
			tabBar4
		},
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data(){
			return{
				autoheight:0,
				flag:[],
				Teammembers:[],
				currentPage:'index',
				toView:'',//回到顶部id
				tabTitle:[{
					tit:'我的团队',
					num:''
				},
				{
					tit:'我的邀请人',
					num:''
				}], //导航栏格式 --导航栏组件
				currentTab: 0, //sweiper所在页
				pages:[1,1], //第几个swiper的第几页
				myyaoqing:{
					image:'https://wx.qlogo.cn/mmopen/vi_32/MqW7XCh9Mc4SFgmUHuI8FYpdFauEjricKiaP5foa0aXiaJ8icgu0NH8EWsZGROFpJIX2ayF8VLJ0Ez8rnq8IyA2SaQ/132',
					name:'爱森'
				},
				myteam:{
					
				}
			}
		},
		onShow:function(){
			console.log(this.flag[0])
			this.getTeammembers()
			uni.request({
				url:this.apiUrl+'api/team_list',
				data:{},
				method:'POST',
				header:{
					openid:this.openId
				},
				success: (res) => {
					this.tabTitle[0].num = res.data.data.user_pid_num + '人'
					if(res.data.data.user_pid_name == ''){
						this.tabTitle[1].num = '暂无邀请人'
						this.myyaoqing.name = '暂无邀请人'
					}else{
						this.tabTitle[1].num = res.data.data.user_pid_name
						this.myyaoqing.name = res.data.data.user_pid_name
					}
					// console.log(res.data.data.slice(-1))
					// var myteam = res.data.data.pop()
					this.myteam = res.data.data.list
					console.log(this.myteam)
				}
			})
		},
		mounted() {
			var _this = this
			setTimeout(() => {
				var view = uni.createSelectorQuery().in(_this).select(".Lu-swiper-list1");
				view.fields({
				  size: true,
				  scrollOffset: true
				}, data => {
				  console.log("得到节点信息" + JSON.stringify(data));
				  console.log("节点的宽为" + data.height);
				  _this.autoheight = data.height * 2
				}).exec();
			}, 200)
		},
		methods:{
			navback(){
				uni.navigateBack({
					delta:1
				})
			},
			showContent:function(index){
				var f=this.flag[index] = !this.flag[index]
				// this.flag.splice(index,0,f)
				this.$set(this.flag,index,f)
				console.log(this.flag)
				
				var _this = this
				setTimeout(() => {
					var view = uni.createSelectorQuery().in(_this).select(".Lu-swiper-list1");
					view.fields({
					  size: true,
					  scrollOffset: true
					}, data => {
					  console.log("得到节点信息" + JSON.stringify(data));
					  console.log("节点的宽为" + data.height);
					  _this.autoheight = data.height * 2
					}).exec();
				}, 200)
			},
			changeTab(index){
				this.currentTab = index;
			},
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
			},
			navTo(url) {
				if (!this.hasLogin) {
					// this.wxGetUserInfo()
					uni.showModal({
					    title: '未登录',
					    content: '请授权登录',
					    success: function (res) {
					        if (res.confirm) {
					           
					        } else if (res.cancel) {
					            
					        }
					    }
					})
				}else{
					uni.navigateTo({
						url
					})
				}
			},
			getTeammembers:function(){
				uni.request({
					url:this.apiUrl+'api/my_team',
					data:{},
					method:'POST',
					header:{
						openid:this.openId
					},
					success: (res) => {
						console.log(res)
						this.Teammembers = res.data.data
						console.log(this.Teammembers.length != undefined)
					}
				})
			},
			xiala:function(){
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.active{
		display: none;
	}
	.Lu-team-box{
		padding: 80rpx 20rpx;
		
		.Lu-team-header{
			// margin-top: 70rpx;
			height: 40rpx;
			line-height: 40rpx;
			.Lu-team-headericon{
				font-size: 32rpx;
				color: #ffffff;
			}
			.Lu-team-headertit{
				font-size: 30rpx;
				color: #ffffff;
				margin-left: 30rpx;
			}
			.Lu-team-quanyi{
				font-size: 30rpx;
				color: #ffffff;
				margin-right: 30rpx;
			}
			.Lu-F-title{
				font-size: 34rpx;
			}
		}
		.Lu-team-body{
			.Lu-team-img{
				width: 340rpx;
				height: 256rpx;
				margin: 0 auto;
				margin-top: 300rpx;
				.Lu-team-imgs{
					width: 340rpx;
					height: 256rpx;
					display: block;
				}	
			}
			.Lu-team-nohuoban{
				font-size: 24rpx;
				text-align: center;
				color: #666666;
				margin: 40rpx 0 14rpx;
			}
			.Lu-team-go{
				background-image:url(~@/static/image/team/bg.png);
				background-size: 196rpx 74rpx;
				background-repeat: no-repeat;
				width: 196rpx;
				height: 74rpx;
				text-align: center;
				line-height: 74rpx;
				color: #ffffff;
				margin: 0 auto;
			}
		}
	}
	.Lu-team-TeamLists{
		margin-top: 28rpx;
		.Lu-team-TeamList{
			.Lu-team-name{
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:30rpx 46rpx;
				border-radius: 20rpx;
			}
			.Lu-team-name1{
				display: flex;
				align-items: center;
				justify-content: center;
				.Lu-team-nameimg{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.Lu-team-name2{
					font-size: 30rpx;
					color: #333333;
					margin-left: 50rpx;
				}
			}
			.Lu-team-TwoLists{
				background-color: #fff;
				margin-top: 20rpx;
				border-radius: 20rpx;
				.Lu-team-TwoList{
					display: flex;
					align-items: center;
					justify-content: start;
					padding:30rpx 46rpx;
					.Lu-team-Twoimg{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
					.Lu-team-Twoname{
						font-size: 30rpx;
						color: #333333;
						margin-left: 50rpx;
					}
				}
			}
		}
	}
	.Lu-team-box1{
		background-image:url(~@/static/image/team/teambg.png);
		background-size: 100% 560rpx;
		background-repeat: no-repeat;
	}
	.Lu-swiper-listinfobox{
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.Lu-team-headername{
		margin-left: 26rpx;
		margin-top: 40rpx;
		.Lu-team-headerimg{
			width: 108rpx;
			height: 108rpx;
			image{
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}
		}
		.Lu-team-headertit{
			margin-left: 26rpx;
			.Lu-team-headertitname{
				color: #fdfeff;
				font-size: 48rpx;
			}
			.Lu-team-headertittype{
				margin-top: 8rpx;
				height: 36rpx;
				line-height: 36rpx;
				.Lu-team-typetit{
					width: 156rpx;
					height: 36rpx;
					border-radius: 20rpx;
					line-height: 36rpx;
					text-align: center;
					background-color: #ff65b1;
					font-size: 24rpx;
					color: #fdfeff;
					display: inline-block;
				}
				.Lu-team-typetiticon{
					font-size: 36rpx;
					display: inline-block;
					margin-left: 12rpx;
				}
			}
		}
	}
	.Lu-swiper-listbox{
		margin-top: 20rpx;
		.Lu-swiper-list{
			.Lu-swiper-listimg{
				width: 100%;
				height: 60rpx;
			}
			.Lu-swiper-listinfo{
				background-color: #fff;
				margin-top: -12rpx;
				
				padding: 30rpx 46rpx;
				// margin-bottom: 32rpx;
				.Lu-swiper-listinfoimg{
					width: 120rpx;
					height: 120rpx;
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
				}
				.Lu-swiper-listinfoname{
					margin-left: 54rpx;
					font-size: 30rpx;
					.Lu-swiper-listinfonames{
						
					}
					.Lu-swiper-listinfotype{
						font-size: 24rpx;
						color: #999999;
					}
					.Lu-swiper-listinfofs{
						font-size: 24rpx;
						color: #999999;
					}
				}
				.Lu-swiper-listinfoicon{
					margin-top: 48rpx;
					font-size: 32rpx;
				}
			}
			.Lu-swiper-twolist{
				background-color: #fff;
				border-radius: 10rpx;
				padding: 28rpx 50rpx;
				.Lu-swiper-twolistinfo{
					margin-bottom: 20rpx;
					.Lu-swiper-twolistinfoimg{
						width: 120rpx;
						height: 120rpx;
						image{
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}
					.Lu-swiper-twolistinfoname{
						margin-left: 54rpx;
						font-size: 30rpx;
						.Lu-swiper-twolistinfotype{
							font-size: 24rpx;
							color: #999999;
						}
						.Lu-swiper-twolistinfofs{
							font-size: 24rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
	
</style>
